<template>
  <div class="im">
    <div class="B">
      <h1>11</h1>

    </div>
    <div class="A">
      <div class="search-container">
        <input type="text" v-model="searchQuery" placeholder="输入电影名称或选择频道" class="search-input"
          @focus="clearSearchQueryIfChannelSelected" />
        <button @click="searchMovies" :disabled="!searchQuery" class="search-button">
          <i class="fas fa-search"></i>
        </button>
      </div>
      <div class="channel-list">
        <div v-for="channel in channels" :key="channel.id" @click="setQueryAndSearch(channel.name)"
          class="channel-item">
          {{ channel.name }}
        </div>
      </div>
      <div v-if="searchResults.length > 0">
        <h3>搜索结果：</h3>
        <ul>
          <li v-for="movie in searchResults" :key="movie.id">
            {{ movie.title }}
          </li>
        </ul>
      </div>
      <div v-else>
        <p>没有搜索结果。</p>
      </div>
    </div>

  </div>

</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      channels: [
        { id: 1, name: '动作片' },
        { id: 2, name: '喜剧片' },
        { id: 3, name: '科幻片' },
        { id: 4, name: '动作片' },
        { id: 5, name: '喜剧片' },
        { id: 6, name: '科幻片' },
        { id: 7, name: '动作片' },
        { id: 8, name: '喜剧片' },
        { id: 9, name: '科幻片' },
        { id: 10, name: '动作片' },
        { id: 11, name: '喜剧片' },
        { id: 12, name: '科幻片' },

      ],
      movies: [

        { id: 1, title: '电影1', channel: '动作片' },
        { id: 2, title: '电影2', channel: '喜剧片' },
        { id: 3, title: '电影3', channel: '科幻片' },

      ],
      searchResults: [],
    };
  },
  methods: {
    setQueryAndSearch(channelName) {
      this.searchQuery = channelName;
      this.searchMovies();
    },
    searchMovies() {
      if (this.searchQuery) {
        this.searchResults = this.movies.filter(movie => {
          return movie.channel === this.searchQuery || movie.title.includes(this.searchQuery);
        });
      } else {
        this.searchResults = [];
      }
    },
    clearSearchQueryIfChannelSelected() {
      if (this.channels.some(channel => channel.name === this.searchQuery)) {
        this.searchQuery = '';
      }
    },
  },
};  
</script>

<style scoped></style>

<style scoped>
.search-container {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  margin-bottom: 10px;
}

.search-input {
  flex: 1;
  padding: 5px;
  border: none;
  outline: none;
  font-size: 16px;
}

.search-button {
  background-color: #4CAF50;
  border: none;
  color: rgb(236, 236, 236);
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin-left: 5px;
  border-radius: 4px;
  cursor: pointer;
}

.search-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.channel-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}

.channel-item {
  background-color: #eee4e4;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px 10px;
  margin: 5px;
  cursor: pointer;
  border-radius: 17%;
}

.channel-item:hover {
  background-color: #f7dbdb;
}

h3 {
  margin-top: 20px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin-bottom: 5px;
}

p {
  margin-top: 10px;
}

.A {
  background-image: url(https://www.codelover.club/files/stutasks/userID_894/currNo_29/FpV-0Im7-n-ajyPBUD4N_a_tPcqm.jpg);
  height: 700px;
  background-size: cover
}

.B {
  height: 30px;
}
</style>

  
